<!--
 * @Author: yan_hai_dong 891236760@qq.com
 * @Date: 2022-07-18 10:48:45
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @LastEditTime: 2022-07-20 13:26:42
 * @FilePath: \app\src\views\el\chuancan\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div>
      <p v-for="({ value }, i) in coms" :key="i">
        value{{ i }}:{{ values[value] }}
      </p>
    </div>
    <component
      v-for="({ is, props, value }, i) in coms"
      :key="i"
      :is="is"
      v-model="values[value]"
      v-bind="props"
    ></component>
  </div>
</template>

<script>
export default {
  components: {
    MyCom1: () => import("./components/my-com1"),
    MyCom2: () => import("./components/my-com2"),
  },
  data() {
    return {
      coms: [
        {
          is: "MyCom1",
          value: "value1",
          props: {
            id: "1",
            name: "MyCom1",
          },
        },
        {
          is: "MyCom2",
          value: "value2",
          props: {
            id: "2",
            name: "MyCom2",
            data: [2, 3, 4],
          },
        },
      ],
      values: {
        value1: "",
        value2: "",
      },
      // value1: "value1",
      // value2: "value2",
    };
  },
  // computed: {
  //   values: {
  //     get() {
  //       console.log("values");
  //       return {
  //         value1: this.value1,
  //         value2: this.value2,
  //       };
  //     },
  //     set(val) {
  //       this.value1 = val.value1;
  //       this.value2 = val.value2;
  //     },
  //   },
  // },
};
</script>

<style lang="less" scoped>

</style>